<template>
    <div>
        <!-- <h1>turnoverHouse</h1> -->
         <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>住房管理</el-breadcrumb-item>
            <el-breadcrumb-item>周转房申请管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-tabs tab-position="top" v-model="activeName" :stretch="true">
                <el-tab-pane label="零星分配管理" name="1">
                   
                    <el-form ref="form" :model="sporadicForm" :inline="true" label-width="80px">
                         <el-row :gutter="10">
                        <el-form-item label="校区">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item label="楼栋">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item label="楼层">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item label="房间名称">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item label="处理状态">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item label="申请人">
                            <el-input v-model="sporadicForm.campuse" placeholder="请输入校区"></el-input>
                        </el-form-item>
                        <el-form-item class="miniMargin">
                            <el-button type="info">重置</el-button>
                            <el-button type="primary">查询</el-button>
                        </el-form-item>
                        </el-row>
                    </el-form>
                    <el-table :data="sporadicData" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                        <el-table-column type="index" label=""></el-table-column>
                        <el-table-column prop="houseName" label="公用房名称"></el-table-column>
                        <el-table-column prop="username" label="申请人"></el-table-column>
                        <el-table-column prop="holder" label="持有人"></el-table-column>
                        <el-table-column prop="revolveHouseApplyTime" label="申请使用时间" width="150px"></el-table-column>
                        <el-table-column prop="revolveHouseStartTime" label="使用开始时间" width="150px"></el-table-column>
                        <el-table-column prop="revolveHouseEndTime" label="申请结束时间" width="150px"></el-table-column>
                        <el-table-column prop="reason" label="申请原因" width="150px"></el-table-column>
                        <el-table-column prop="revolveHouseState1" label="空闲状态">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.revolveHouseState1 ==='是'" type="success">是</el-tag>
                                <el-tag v-else type="warning">否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="revolveHouseState2" label="处理状态">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.revolveHouseState2 ==='是'" type="success">是</el-tag>
                                <el-tag v-else type="warning">否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150px" fixed="right">
                            <template>
                                <el-button size="mini" type="success" icon="el-icon-check"></el-button>
                                <!-- <el-button size="mini" type="info" icon="el-icon-search"></el-button> -->
                                <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
                                <!-- <el-button size="mini" type="danger" icon="el-icon-close"></el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                     <el-pagination
                        @size-change="sporadicSizeChange"
                        @current-change="sporadicCurrentChange"
                        :current-page="1"
                        :page-sizes="[10, 20]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="20">
                    </el-pagination>
                </el-tab-pane>
                
                <el-tab-pane label="打卡排队分配" name="2">打卡排队分配</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName:'1',
            sporadicForm:{},
            sporadicData:[],
        }
    },
    created(){
        this.getSporadic()
    },
    methods:{
        // 获取零星分配
    // RevolveHouse/selectSporadic
        async getSporadic(){
            await this.$http.get('RevolveHouse/selectSporadic').then(res=>{
                console.log(res);
                if(res.data.code!==1){
                    return this.$message.error('零星分配列表获取失败');
                }
                this.sporadicData = res.data.data.list
            }).catch((err)=>{
                console.log(err);
            })
        },
        sporadicSizeChange(){},
        sporadicCurrentChange(){}
        
    }
}
</script>
